<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- For Reflect.construct -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
  <!-- For CustomEvent -->
  <script type="text/javascript" src="https://unpkg.com/@webcomponents/webcomponents-platform@1.0.0/webcomponents-platform.js"></script>
  <!-- For Template -->
  <script type="text/javascript" src="https://unpkg.com/@webcomponents/template@1.2.2/template.js"></script>
  <!-- For HTML Imports and Custom Elements -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-hi-ce.js"></script>
</head>
<body>
  <h2>Past Date</h2>
  <p>
    Local date:
    <local-time datetime="1970-01-01T00:00:00.000Z" weekday="short" year="numeric" month="short" day="numeric">
      Jan 1 1970
    </local-time>
  </p>

  <p>
    Local time:
    <local-time datetime="1970-01-01T00:00:00.000Z" hour="numeric" minute="2-digit" second="2-digit">
      Jan 1 1970
    </local-time>
  </p>

  <p>
    Local date and time:
    <local-time datetime="1970-01-01T00:00:00.000Z" weekday="short" year="numeric" month="short" day="numeric" hour="numeric" minute="2-digit" second="2-digit">
      Jan 1 1970
    </local-time>
  </p>

  <p>
    Relative time:
    <relative-time datetime="1970-01-01T00:00:00.000Z">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Time ago:
    <time-ago datetime="1970-01-01T00:00:00.000Z">
      Oops! This browser doesn't support Web Components.
    </time-ago>
  </p>

  <p>
    Time ago (micro format):
    <time-ago format="micro" datetime="1970-01-01T00:00:00.000Z">
      Oops! This browser doesn't support Web Components.
    </time-ago>
  </p>

  <h2>Future Date</h2>
  <p>
    Local date:
    <local-time datetime="2017-01-01T00:00:00.000Z" weekday="short" year="numeric" month="short" day="numeric">
      Jan 1 2017
    </local-time>
  </p>

  <p>
    Local time:
    <local-time datetime="2017-01-01T00:00:00.000Z" hour="numeric" minute="2-digit" second="2-digit">
      Jan 1 2017
    </local-time>
  </p>

  <p>
    Local date and time:
    <local-time datetime="2017-01-01T00:00:00.000Z" weekday="short" year="numeric" month="short" day="numeric" hour="numeric" minute="2-digit" second="2-digit">
      Jan 1 2017
    </local-time>
  </p>

  <p>
    Relative time:
    <relative-time datetime="2017-01-01T00:00:00.000Z">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Time until:
    <time-until datetime="2017-01-01T00:00:00.000Z">
      Oops! This browser doesn't support Web Components.
    </time-until>
  </p>

  <p>
    Time until (micro format):
    <time-until format="micro" datetime="2017-01-01T00:00:00.000Z">
      Oops! This browser doesn't support Web Components.
    </time-until>
  </p>
  <script src="../dist/time-elements-legacy.js"></script>
</body>
</html>
